<template>
	<section>
		<el-col :span="24" class="toolbar"  style="padding-bottom: 0px;">
			<el-form :inline="true">
				<el-form-item>
					<el-button type="primary" @click="handleAdd">添加机构</el-button>
				</el-form-item>		
				<el-form-item>
				  <el-select v-model="orgTypeId" placeholder="请选择机构类型">			  	
				    <el-option value=""  label="全部" >
				    </el-option> 				  	
				    <el-option v-for="item in orgTypeList" :value="item.orgTypeId"  :label="item.name" >
				    </el-option> 
				    
				  </el-select>					
				</el-form-item>						
				<el-form-item>
					<el-input v-model="key"  placeholder="输入查询的关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getList">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>					
		<!--工具条-->		
		<el-table :data="Lists" highlight-current-row v-loading="loading" style="width: 100%;">
			<el-table-column  type="index" width='80'>
			</el-table-column>
			<el-table-column prop="name" label="机构名称"  width="200">
			</el-table-column>		
			<el-table-column prop="intro" label="简介"  width="200">
			</el-table-column>		
			<el-table-column prop="location" label="地址"  width="200">
			</el-table-column>				
			<el-table-column prop="legalPerson" label="负责人"  width="200">
			</el-table-column>
			<el-table-column prop="cellphone" label="手机号" width="200">
			</el-table-column>		
			<el-table-column prop="mail" label="邮箱" width="200">
			</el-table-column>
			<el-table-column prop="updateTime" label="创建时间" width="200">
			</el-table-column>	
			<el-table-column label="有效时间"  width="200">
				  <template scope="scope">
				    <p>{{ scope.row.term}}天</p>
				  </template>
			</el-table-column>				
			<el-table-column prop="birth" min-width="200" label="操作" fixed="right" sortable>
				<template scope="scope">
					<el-button size="small" type="danger" @click="handleDel(scope.row)">删除</el-button>
					<el-button size="small" type="primary" @click="getone(scope.row)">编辑</el-button>
					<el-button size="small" type="info" v-if="scope.row.isExpired">已失效</el-button>
				</template>					
			</el-table-column>
		</el-table>
		<!--工具-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
			</el-pagination>
		</el-col>		
		<!--新增界面-->
		<el-dialog  title="添加机构" :fullscreen="false" custom-class="orgdialog"  v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addorg"  :rules="addorgrule" ref="addorg">		
				<el-form-item label="机构名称"  prop="name" >
					<el-input v-model="addorg.name" placeholder="填写机构名称"  auto-complete="off"  style="width: 60%;"></el-input>
				</el-form-item>	
				<el-form-item label="机构类型"  prop="orgTypeId" >
				    <el-select placeholder="请选择机构类型" v-model="addorg.orgTypeId">
				      <el-option v-for="el in orgTypeList" :value="el.orgTypeId" :label="el.name"></el-option>
				    </el-select>
				</el-form-item>		
				<el-form-item label="机构位置"  prop="location" >
					<el-input v-model="addorg.location" placeholder="填写机构具体位置"  auto-complete="off"  style="width: 60%;"></el-input>
				</el-form-item>						
				<el-form-item label="机构简介">
					<el-input type="textarea"	v-model="addorg.intro" placeholder="填写机构简介"  auto-complete="off"  style="width: 60%;"></el-input>
				</el-form-item>		
				<el-form-item label="机构电话">
					<el-input v-model="addorg.telephone" placeholder="填写机构负责人"  auto-complete="off"  style="width: 60%;"></el-input>
				</el-form-item>	
				<el-form-item label="邮箱">
					<el-input v-model="addorg.mail" placeholder="填写邮箱"  auto-complete="off"  style="width: 60%;"></el-input>
				</el-form-item>				
				<el-form-item label="负责人" prop="legalPerson">
					<el-input v-model="addorg.legalPerson" placeholder="填写机构负责人"  auto-complete="off"  style="width: 60%;"></el-input>
				</el-form-item>						
				<el-form-item label="负责人电话"  prop="cellphone">
					<el-input type="text" v-model="addorg.cellphone" placeholder="填写机构具体位置"  auto-complete="off"  style="width: 60%;"></el-input>
				</el-form-item>	
				<el-form-item label="有效时间"  prop="term">
					<el-input type="number" v-model="addorg.term" placeholder="填写有效时间(天)"  auto-complete="off"  style="width: 60%;"></el-input>
				</el-form-item>	
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
		<!--新增界面-->
		<el-dialog  title="编辑机构" :fullscreen="false" custom-class="orgdialog"  v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editorg"  :rules="editorgrule" ref="editorg">		
				<el-form-item label="机构名称"  prop="name" >
					<el-input v-model="editorg.name" placeholder="填写机构名称"  auto-complete="off"  style="width: 60%;"></el-input>
				</el-form-item>	
				<el-form-item label="机构类型"  prop="orgTypeId" >
				    <el-select placeholder="请选择机构类型" v-model="editorg.orgTypeId">
				      <el-option v-for="el in orgTypeList" :value="el.orgTypeId" :label="el.name"></el-option>
				    </el-select>
				</el-form-item>		
				<el-form-item label="机构位置"  prop="location" >
					<el-input v-model="editorg.location" placeholder="填写机构具体位置"  auto-complete="off"  style="width: 60%;"></el-input>
				</el-form-item>						
				<el-form-item label="机构简介">
					<el-input type="textarea"	v-model="editorg.intro" placeholder="填写机构简介"  auto-complete="off"  style="width: 60%;"></el-input>
				</el-form-item>		
				<el-form-item label="机构电话">
					<el-input v-model="editorg.telephone" placeholder="填写机构负责人"  auto-complete="off"  style="width: 60%;"></el-input>
				</el-form-item>	
				<el-form-item label="邮箱">
					<el-input v-model="editorg.mail" placeholder="填写邮箱"  auto-complete="off"  style="width: 60%;"></el-input>
				</el-form-item>				
				<el-form-item label="负责人" prop="legalPerson">
					<el-input v-model="editorg.legalPerson" placeholder="填写机构负责人"  auto-complete="off"  style="width: 60%;"></el-input>
				</el-form-item>						
				<el-form-item label="负责人电话"  prop="cellphone">
					<el-input type="text" v-model="editorg.cellphone" placeholder="填写机构具体位置"  auto-complete="off"  style="width: 60%;"></el-input>
				</el-form-item>	
				<el-form-item label="有效时间"  prop="term">
					<el-input type="number" v-model="editorg.term" placeholder="填写有效时间(天)"  auto-complete="off"  style="width: 60%;"></el-input>
				</el-form-item>	
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>		
	</section>
</template>
<script>
	import { orglist,orgdelete,orgadd,orgone,orgedit,orgnamerule,OrgTypelist,usernamerule} from '../../api/api';

	//import NProgress from 'nprogress'
	export default {
		data() {
			var numberrule=(rule, value, callback)=>{
			  if (value < 1 ) {
			    callback(new Error('有效时间必须大于0'))
			  } else {
			    callback()
			  }							
			}	
			var phonerule=(rule, value, callback)=>{
	  			var myreg=/^[1][3,6,4,5,7,8][0-9]{9}$/;
	            if (!myreg.test(value)) {
	                 callback(new Error('请填写有效手机号'))
	            } else {
	                callback()
	            }	  
			}				
			var rulesname=(rules,value,callback)=>{
				let params={name:this.addorg.name};
				orgnamerule(params).then((r)=>{
					if(!r){
						callback(new Error('机构名称重复'))
					}else{
						callback()
					}
				})
			}	
			var editrulesname=(rules,value,callback)=>{
				if(this.editorg.checkname!=this.editorg.name){			
					let params={name:this.editorg.name};
					orgnamerule(params).then((r)=>{
						if(!r){
							callback(new Error('机构名称重复'))
						}else{
							callback()
						}
					})
				}else{
					callback()
				}
			}	
			var rulesphone=(rules,value,callback)=>{
				console.log(value)
				let params={phone:this.addorg.cellphone};
				usernamerule(params).then((r)=>{
					if(!r){
						callback(new Error('手机号重复'))
					}else{
						callback()
					}
				})
			}	
			var editrulesphone=(rules,value,callback)=>{
				if(this.editorg.checkphone!=this.editorg.cellphone){			
					let params={phone:this.editorg.cellphone};
					usernamerule(params).then((r)=>{
						if(!r){
							callback(new Error('手机号重复'))
						}else{
							callback()
						}
					})
				}else{
					callback()
				}
			}				
			return {
				addFormVisible: false,
				addLoading: false,	
				autoorg:false,
				editFormVisible: false,
				editLoading: false,		
				orgupload:"org",
				Lists:[],
				orgTypeList:[],
				orgTypeId:"",
				addorg:{
					name:"",
					intro:"",
					orgTypeId:"",
					location:"",
					legalPerson:'',
					cellphone:"",
					mail:"",
					telephone:"",
					term:""
				},
				editorg:{
				
				},
				param:"",
				editparam:"",
				addorgrule: {
					name: [
						{ required: true, message: '填写机构名称', trigger: 'blur' },
						{validator:rulesname,trigger: 'blur'}	
					],
					cellphone:[
						{ required: true, message: '负责人手机号不能为空', trigger: 'blur' },
						{ validator:phonerule,trigger: 'blur'},
						{ validator:rulesphone,trigger: 'blur'}
					],
					orgTypeId:[
						{ required: true, message: '请选择机构类型', trigger: 'blur' }
					],
					legalPerson:[
						{ required: true, message: '负责人不能为空', trigger: 'blur' }
					],
					location:[
						{ required: true, message: '地理位置不能为空', trigger: 'blur' }
					],
					term:[
						{ required: true, message: '有效时间不能为空', trigger: 'blur' },
						{validator:numberrule,trigger: 'blur'}	
					]
				},		
				editorgrule: {
					name: [
						{ required: true, message: '填写机构名称', trigger: 'blur' },
						{validator:editrulesname,trigger: 'blur'}	
					],
					cellphone:[
						{ required: true, message: '负责人手机号不能为空', trigger: 'blur' },
						{ validator:phonerule,trigger: 'blur'},
						{ validator:editrulesphone,trigger: 'blur'}
					],
					orgTypeId:[
						{ required: true, message: '请选择机构类型', trigger: 'blur' }
					],
					legalPerson:[
						{ required: true, message: '负责人不能为空', trigger: 'blur' }
					],
					location:[
						{ required: true, message: '地理位置不能为空', trigger: 'blur' }
					],
					term:[
						{ required: true, message: '有效时间不能为空', trigger: 'blur' },
						{validator:numberrule,trigger: 'blur'}	
					]
				},						
				form:{
					resource:""
				},
				page:"1",
				pagesize:"10",
				total:'',
				key:"",
				isShared:" ",
				isSelf:'1',
			}
		},
		watch:{
			
		},
		methods: {	

			handleAdd: function () {
				this.addFormVisible = true;
			},
			fileclick:function(){
				$('.orgauto').toggle()
			},
			isSharedclick:function(type){
				this.isShared=type;
				this.getList();
			},
			//获取机构类型
			getorgtypelist:function(){
				OrgTypelist().then((res)=>{
					$.each(res, function(i,value) {
						value.orgTypeId=JSON.stringify(value.orgTypeId)
					});
					this.orgTypeList=res;
				})
			},	
			//获取项目列表
			getList: function () {
				this.loading = true;
				//NProgress.start();
				let params={pageNum:this.page,pageSize:this.pagesize,key:this.key,orgTypeId:this.orgTypeId};
				orglist(params).then((res) => {
					this.total=res.total;					
					this.Lists = res.list;
					this.loading = false;
					//NProgress.done();
				});					
			},		
			getone:function(row){
				var params=row.orgId;
				orgone(params).then((res)=>{	
					res.checkname=res.name;
					res.checkphone=res.cellphone;
					res.term=JSON.stringify(res.term);
					this.editFormVisible=true;
					res.orgTypeId=JSON.stringify(res.orgTypeId);
					this.editorg = Object.assign({}, res);
				})
				
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getList();
			},	       
			handleDel:function (row) {
				this.$confirm('确认删除该记录吗?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',					
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para =row.orgId;
					orgdelete(para).then((res) => {
						if(!res.error){
							this.listLoading = false;
							//NProgress.done();
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.getList();							
						}else{
							this.$message({
								type: 'error',
								message: '取消失败'		
							});								
						}
					});
				}).catch(() => {
					this.$message({
						type: 'error',
						message: '取消失败'			
					});						
				});
			},
			//新增
			addSubmit: function () {
				this.param=new URLSearchParams()
				this.$refs.addorg.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							//NProgress.start();
							this.param.append('name',this.addorg.name);
							this.param.append('intro',this.addorg.intro);
							this.param.append('orgTypeId',this.addorg.orgTypeId);
							this.param.append('location',this.addorg.location);
							this.param.append('legalPerson',this.addorg.legalPerson);
							this.param.append('cellphone',this.addorg.cellphone);
							this.param.append('mail',this.addorg.mail);
							this.param.append('telephone',this.addorg.telephone);
							this.param.append('term',this.addorg.term);
							orgadd(this.param).then((r) => {
								if(!r.error){
									this.addLoading = false;
									this.$message({
										message: '添加成功',
										type: 'success'
									});
									this.fileList=[];
									this.$refs['addorg'].resetFields();
									this.addFormVisible = false;
									this.param='';
									this.getList();									
								}else{
									this.addLoading = false;
									this.param='';
									this.$message({
										message: '添加失败',
										type: 'error'
									});										
								}
							}).catch(()=>{
								this.addLoading = false;
								this.param='';
								this.$message({
									message: '添加失败',
									type: 'error'
								});								
							});
						});
					}
				});
			},
			//编辑
			editSubmit: function () {
				this.editparam=new URLSearchParams()
				this.$refs.editorg.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							//NProgress.start();
							this.editparam.append('name',this.editorg.name);
							this.editparam.append('intro',this.editorg.intro);
							this.editparam.append('orgId',this.editorg.orgId);
							this.editparam.append('orgTypeId',this.editorg.orgTypeId);
							this.editparam.append('location',this.editorg.location);
							this.editparam.append('legalPerson',this.editorg.legalPerson);
							this.editparam.append('cellphone',this.editorg.cellphone);
							this.editparam.append('mail',this.editorg.mail);
							this.editparam.append('telephone',this.editorg.telephone);
							this.editparam.append('term',this.editorg.term);
							orgedit(this.editparam).then((r) => {
								if(!r.error){
									this.editLoading = false;
									this.$message({
										message: '更新成功',
										type: 'success'
									});
									this.$refs['editorg'].resetFields();
									this.editFormVisible = false;
									this.eidtparam='',
									this.getList();									
								}else{
									this.editLoading = false;
									this.eidtparam='',
									this.$message({
										message: '更新失败',
										type: 'error'
									});										
								}
							}).catch(()=>{
								this.editLoading = false;
								this.eidtparam='',
								this.$message({
									message: '更新失败',
									type: 'error'
								});								
							});
						});
					}
				});
			},			
		},
		mounted() {
			this.getList();
			this.getorgtypelist();
					

		}
	};

</script>

<style>
.orgdialog {
	width:40%;
}
</style>